<template>
  <div class="container">
    <div class="card-container">
      <div style="margin-bottom:0;" @change="tabsChange" type="card" :tabBarStyle="{'marginBottom':0,'marginTop':'20px'}">
        <div :key="0" tab="总表" style="background-color: #f0f2f5;padding: 20px 0 0 0;">
          <div class="search">
            <a-form-model layout="inline">
              <a-row type="flex" >
                <a-col :xxl="5" :xl="12" :lg="24" :md="24" :sm="24" :xs="24" >
                  <a-form-item label="选择时间" :labelAlign="labelAlign" :labelCol="{xxl:{span: 6},xl:{span: 4},lg:{span:4},md:{span:4},sm:{span:4},xs:{span: 12}}" :wrapperCol="{xxl:{span: 17},xl:{span: 19},lg:{span:24},md:{span: 24},sm:{span: 24},xs:{span: 24}}" style="width: 100%">
                    <a-select v-model="chartTimeSelect" @change="selectChange">
                      <a-select-option :value="1">当日</a-select-option>
                      <a-select-option :value="2">昨日</a-select-option>
                      <a-select-option :value="3">过去一周</a-select-option>
                      <a-select-option :value="4">过去30天</a-select-option>
                      <a-select-option :value="5">本月</a-select-option>
                      <a-select-option :value="6">本季度</a-select-option>
                      <a-select-option :value="7">自定义</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>  
                <a-col :xxl="6" :xl="12" :lg="24" :md="24" :sm="24" :xs="24" v-if="chartTimeSelect == 7" >
                  <a-form-item label="自定义时间" :labelAlign="labelAlign" :labelCol="{xxl:{span: 6},xl:{span: 4},lg:{span:4},md:{span:4},sm:{span:4},xs:{span: 12}}" :wrapperCol="{xxl:{span: 17},xl:{span: 19},lg:{span:24},md:{span: 24},sm:{span: 24},xs:{span: 24}}" style="width: 100%">
                    <a-range-picker
                      :allowClear="false"
                      :ranges="{ '昨天': [moment().add(-1, 'days'), moment().add(-1, 'days')], '过去7天': [moment().add(-7, 'days'), moment().add(-1, 'days')], 
                                '过去30天': [moment().add(-30, 'days'), moment().add(-1, 'days')] }"
                      :defaultValue="[moment(form.start_date), moment(form.end_date)]"
                      :disabled-date="disabledDate" @change="formDateChange" 
                      v-if="chartTimeSelect == 7" style="width: 100%;"
                    />
                  </a-form-item>
                </a-col>
                <a-col :xxl="5" :xl="12" :lg="24" :md="24" :sm="24" :xs="24" >
                  <a-form-item label="选择账户" :labelAlign="labelAlign" :labelCol="{xxl:{span: 6},xl:{span: 4},lg:{span:4},md:{span:4},sm:{span:4},xs:{span: 12}}" :wrapperCol="{xxl:{span: 17},xl:{span: 19},lg:{span:24},md:{span: 24},sm:{span: 24},xs:{span: 24}}" style="width: 100%">
                    <a-select v-model="superid"  @change="getTotalData">
                      <a-select-option :value="0">全部账户</a-select-option>
                      <a-select-option :value="item.id" v-for="(item,index) in userData" :key="index">{{item.account}}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :xxl="5" :xl="12" :lg="24" :md="24" :sm="24" :xs="24" >
                  <a-form-item label="选择类型" :labelAlign="labelAlign" :labelCol="{xxl:{span: 6},xl:{span: 4},lg:{span:4},md:{span:4},sm:{span:4},xs:{span: 12}}" :wrapperCol="{xxl:{span: 17},xl:{span: 19},lg:{span:24},md:{span: 24},sm:{span: 24},xs:{span: 24}}" style="width: 100%">
                    <a-select v-model="accountType"  @change="getTotalData">
                      <a-select-option :value="0">全部</a-select-option>
                      <a-select-option :value="1">商品</a-select-option>
                      <a-select-option :value="2">直播</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :xxl="5" :xl="12" :lg="24" :md="24" :sm="24" :xs="24" >
                  <a-form-item label="选择优化师" :labelAlign="labelAlign" :labelCol="{xxl:{span: 6},xl:{span: 4},lg:{span:4},md:{span:4},sm:{span:4},xs:{span: 12}}" :wrapperCol="{xxl:{span: 17},xl:{span: 19},lg:{span:24},md:{span: 24},sm:{span: 24},xs:{span: 24}}" style="width: 100%">
                    <a-select v-model="youhuashiId" style="width:100%;" @change="selectYouhuashi" :disabled="isoptimizer == 1">
                      <a-select-option :value="0">全部优化师</a-select-option>
                      <a-select-option :value="item.id" v-for="(item,index) in youhuashi" :key="index" >
                        {{item.username}}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xxl="2" :xl="2" :lg="2" :md="2" :sm="2" :xs="2" >
                  <a-form-item :labelCol="{xxl:{span: 8},xl:{span: 8},md:{span:4},sm:{span:3},xs:{span: 12}}" :wrapperCol="{xxl:{span: 16},xl:{span: 16},md:{span: 20},sm:{span: 24},xs:{span: 24}}" style="width: 100%">
                    <a-button :loading="outputLoading" type="primary" @click="handle_export">导出报表</a-button>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
          <div class="totalContainer">
            <a-row type="flex" justify="space-between" >
              <a-col :xxl="6" :xl="7" :md="11" :sm="24" :xs="24" class="total-col total-item" style="padding:0;background-color: transparent;">
                <a-row type="flex" justify="space-between" style="height:100%;">
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;">
                    <div class="title">总消费</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.cost || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col> 
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;" offset="2">
                    <div class="title">总成本</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.productCost || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col> 
                </a-row>
              </a-col>

              <a-col :xxl="6" :xl="8" :md="11" :sm="24" :xs="24" class="total-col total-item" style="padding:0;background-color: transparent;">
                <a-row type="flex" justify="space-between" style="height:100%;">
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;">
                    <div class="title">自然成单量</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.zrOrders  || 0))' :duration='800' :decimals="0"></countTo>
                    </div>
                  </a-col> 
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;" offset="2">
                    <div class="title">自然单金额</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.zrGmv || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col> 
                </a-row>
              </a-col>

              <a-col :xxl="6" :xl="8" :md="11" :sm="24" :xs="24" class="total-col total-item" style="padding:0;background-color: transparent;">
                <a-row type="flex" justify="space-between" style="height:100%;">
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;">
                    <div class="title">商品成单量</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.dsOcpcConversionsDetail90 || 0))' :duration='800' :decimals="0"></countTo>
                    </div>
                  </a-col> 
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;" offset="2">
                    <div class="title">商品成单金额</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.productGmv || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col> 
                </a-row>
              </a-col>

              <a-col :xxl="5" :xl="7" :md="11" :sm="24" :xs="24" class="total-col total-item" style="padding:0;background-color: transparent;">
                <a-row type="flex" justify="space-between" style="height:100%;">
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;">
                    <div class="title">直播间成单量</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.dsOcpcConversionsDetail80 || 0))' :duration='800' :decimals="0"></countTo>
                    </div>
                  </a-col>
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;" offset="2">
                    <div class="title">直播间成单金额</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.dsOcpcConversionsDetail80Amount || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>  
                </a-row>
              </a-col>

              <a-col :xxl="6" :xl="8" :md="11" :sm="24" :xs="24" class="total-col total-item" style="padding:0;background-color: transparent;">
                <a-row type="flex" justify="space-between" style="height:100%;">
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;">
                    <div class="title">广告利润</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.profit || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;" offset="2">
                    <div class="title">自然流量利润</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.zrLirun || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>
                </a-row>
              </a-col>

              <a-col :xxl="6" :xl="8" :md="11" :sm="24" :xs="24" class="total-col total-item" style="padding:0;background-color: transparent;">
                <a-row type="flex" justify="space-between" style="height:100%;">
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;">
                    <div class="title">转化率</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.cvr*100).toFixed(2))' :duration='800' :decimals="2"></countTo>%
                    </div>
                  </a-col>
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;" offset="2">
                    <div class="title">点击率</div>
                    <div class="p">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.ctr*100).toFixed(2))' :duration='800' :decimals="2"></countTo>%
                    </div>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :xxl="6" :xl="12" :md="11" :sm="24" :xs="24" class="total-col total-item" style="padding:0;background-color: transparent;">
                <a-row type="flex" justify="space-between" style="height:100%;">
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;">
                    <div class="title">商品成单成本</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.dsOcpcConversionsDetail90Cost || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;" offset="2">
                    <div class="title">商品客单价</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.atv90 || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :xxl="5" :xl="11" :md="11" :sm="24" :xs="24" class="total-col total-item" style="padding:0;background-color: transparent;">
                <a-row type="flex" justify="space-between" style="height:100%;">
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;">
                    <div class="title">直播间成单成本</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.dsOcpcConversionsDetail80Cost || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>
                  <a-col :span="11" class="total-col total-item" style="margin-top:0;" offset="2">
                    <div class="title">直播间客单价</div>
                    <div class="p" style="height: 100%;">
                      <countTo :startVal='0' :endVal='parseFloat((totalList.atv80 || 0))' :duration='800' :decimals="2"></countTo>
                    </div>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
            <div style="background-color:#ffffff;padding:20px;margin-top:20px;">
              <standard-table
                rowKey="userName"
                id="zhanghuTable"
                ref="table"
                :loading='loading'
                :columns="columns"
                :dataSource="dataSource"
                :expandedRowKeys='expandedRowKeys'
                :pagination="{showTotal:total => `更新于：${lastUpdateTime}，共 ${total} 条数据`, pageSize: pageSize,showLessItems: true, showSizeChanger:true,pageSizeOptions:['10', '20', '50', '100']}"
                @clear="onClear"
                @change="onChange"
                @onExpand="onExpand"
                :scroll="{x:1200}"
              >
                <div slot="userName" slot-scope="{record}" >
                  <a-tooltip>
                    <template slot="title">
                      {{record.userName}}
                    </template>
                    <span style="display: block;cursor: pointer;;white-space: nowrap;">{{record.userName}}</span>
                  </a-tooltip>
                </div>
                <div slot="ctr" slot-scope="{record}">
                  {{(record.ctr*100).toFixed(2) + '%'}}
                </div>
                <div slot="profit" slot-scope="{record}" :style="record.profit <= 0?'color:#0ebe98':'color:#f73131'">
                  {{record.profit ? parseFloat(record.profit).toFixed(2) : '-'}}
                </div>
                <div slot="productCost" slot-scope="{record}">
                  {{record.productCost || 0}}
                </div>
                <div slot="cvr80" slot-scope="{record}">
                  {{(record.cvr80*100).toFixed(2) + '%'}}
                </div>
                <div slot="cvr90" slot-scope="{record}">
                  {{(record.cvr90*100).toFixed(2) + '%'}}
                </div>
                <div slot="cost" slot-scope="{record}">
                  {{(record.cost).toFixed(2)}}
                </div>
                <div slot="dsOcpcConversionsDetail80Amount" slot-scope="{record}">
                  {{parseFloat(record.dsOcpcConversionsDetail80Amount).toFixed(2)}}
                </div>
                <div slot="cost80" slot-scope="{record}">
                  {{(record.cost80).toFixed(2)}}
                </div>
                <div slot="cost90" slot-scope="{record}">
                  {{(record.cost90).toFixed(2)}}
                </div>
                <div slot="productGmv" slot-scope="{record}">
                  {{parseFloat(record.productGmv).toFixed(2)}}
                </div>
                <div slot="closedAmount" slot-scope="{record}">
                  {{parseFloat(record.closedAmount).toFixed(2)}}
                </div>
                <div slot="dsOcpcConversionsDetail90" slot-scope="{record}">
                  {{parseFloat(record.dsOcpcConversionsDetail90).toFixed(2)}}
                </div>
                <div slot="dsOcpcConversionsDetail80Cost" slot-scope="{record}">
                  {{record.dsOcpcConversionsDetail80Cost == 0 ? '-' : parseFloat(record.dsOcpcConversionsDetail80Cost).toFixed(2)}}
                </div>
                <div slot="dsOcpcConversionsDetail90Cost" slot-scope="{record}">
                  {{record.dsOcpcConversionsDetail90Cost == 0 ? '-' : parseFloat(record.dsOcpcConversionsDetail90Cost).toFixed(2)}}
                </div>
              </standard-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import countTo from 'vue-count-to';
import {getBdAccountList, getOptimizerList} from '@/api/xinxiliu/account'
import moment from 'moment'
import {getAccountSummary,getAccountReportByDate,getLastUpdateTime} from '@/api/dianshang/dianshang'
import FileSaver from 'file-saver';
import xlsx from 'xlsx';

const columns = [
  // {
  //   title: '',
  //   width: 0,
  //   dataIndex: 'filter',
  //   filters: [
  //     { text: '账户', value: 'userName' },
  //     { text: 'Female', value: 'female' },
  //   ],
  //   filteredValue:['userName'],
  // },
  {
    title: '账户',
    width: 150,
    dataIndex: 'userName',
    scopedSlots: { customRender: 'userName' },
    fixed: 'left',
    filtered:true
  },
  {
    title: '利润',
    width: 100,
    dataIndex: 'profit',
    scopedSlots: { customRender: 'profit' },
    sortDirections:['descend','ascend'],
    sorter: (a,b) => a.profit-b.profit,
  },
  {
    title: '展现',
    width: 100,
    dataIndex: 'impression',
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '点击',
    width: 100,
    dataIndex: 'click',
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '点击率',
    width: 100,
    dataIndex: 'ctr',
    scopedSlots: { customRender: 'ctr' },
    sorter: () => {},
  },
  {
    title: '总消费',
    width: 100,
    dataIndex: 'cost',
    defaultSortOrder: 'descend',
    scopedSlots: { customRender: 'cost' },
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title: '商品成单量',
    width: 130,
    dataIndex: 'dsOcpcConversionsDetail90',
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title:'商品成单成本',
    width: 130,
    dataIndex: 'dsOcpcConversionsDetail90Cost',
    scopedSlots: { customRender: 'dsOcpcConversionsDetail90Cost' },
  },
  {
    title:'商品GMV',
    width: 110,
    dataIndex: 'productGmv',
    scopedSlots: { customRender: 'productGmv' },
  },
  {
    title:'商品退单金额',
    width: 160,
    dataIndex: 'closedAmount',
    scopedSlots: { customRender: 'closedAmount' },
  },
  {
    title:'商品转化率',
    width: 130,
    dataIndex: 'cvr90',
    scopedSlots: { customRender: 'cvr90' },
  },
  {
    title: '直播成单量',
    width: 130,
    dataIndex: 'dsOcpcConversionsDetail80',
    sortDirections:['descend','ascend'],
    sorter: () => {},
  },
  {
    title:'直播成单成本',
    width: 130,
    dataIndex: 'dsOcpcConversionsDetail80Cost',
    scopedSlots: { customRender: 'dsOcpcConversionsDetail80Cost' },
  },
  {
    title:'直播GMV',
    width: 120,
    dataIndex: 'dsOcpcConversionsDetail80Amount',
    scopedSlots: { customRender: 'dsOcpcConversionsDetail80Amount' },
  },
  {
    title:'直播转化率',
    width: 130,
    dataIndex: 'cvr80',
    scopedSlots: { customRender: 'cvr80' },
  },
  {
    title: '成本',
    width: 100,
    dataIndex: 'productCost',
    scopedSlots: { customRender: 'productCost' },
    sortDirections:['descend','ascend'],
    sorter: (a,b) => a-b,
  },
]

export default {
  data() {
    return {
      moment,
      tabsKey:0,
      superid:0,

      userData:[],

      chartTimeSelect:1,
      totalList:{
        atv80:0, // 直播客单价
        atv90:0, // 商品客单价
        cost80:0, // 直播总消费
        cost90:0, // 商品总消费
        dsOcpcConversionsDetail80:0, // 直播间成单量
        dsOcpcConversionsDetail90:0, // 商品成单量
        dsOcpcConversionsDetail80Amount:0, //直播间成单总金额
        productGmv:0, //商品支付成功总金额
        dsOcpcConversionsDetail80Cost: 0, //播间成单成本
        dsOcpcConversionsDetail90Cost: 0, //商品成单成本
        impression: 0,
        click: 0,
        cost: 0,
        cpc: 0,
        ctr:0,
        cvr:0,
      },

      columns:columns,
      loading:false,
      expandedRowKeys:[],
      changeKey:'cost',
      changeOrder:'DESC',
      dataSource:[],

      loading2:false,
      expandedRowKeys2:[],
      changeKey2:'cost',
      changeOrder2:'DESC',
      dataSource2:[],
      dataSource2Total:[],
      keyWord:'',

      hourData:[],
      chartSelect:'cost',
      myChart:null,
      chartIndex:0,
      hourArr:[],
      chartAutoPlay:true,
      chartAutoPlayTimeOut: 3000,
      marks:{},
      marksList:[],
      marksValue:0,
      chartTimeoutFunc:null,
      spin:false,
      youhuashiId:0,
      youhuashi:[], // 优化师列表

      page:1,
      page2:1,
      pageSize: 10,
      accountType: 0,

      form:{
        start_date: moment().add('days').format("YYYY-MM-DD"),
        end_date: moment().add('days').format("YYYY-MM-DD"),
      },

      outputLoading:false,
      lastUpdateTime:'',
      filteredValue:['userName'],
      labelAlign:'right',
    }
  },
  created(){
    this.init()
  },
  mounted(){
    this.myColumns(columns.map(o=>o.dataIndex))
    this.watchWindowWidth()
  },
  methods:{
    init(){
      if(this.tabsKey === 0){
        this.getTotalData()
        this.getUserData()
        this.getOptimizerList()
        this.getLastUpdateTime()
      }
    },
    getUserData(){
      getBdAccountList({}).then((res) => {
        if(res.errcode == 0){
          let arr = []
          for(let i of res.data){
            if(i.pid == 0){
              arr.push(i)
            }
          }
          this.userData = arr
        }
      });
    },
    getTotalData(){
      let params = {
        type:this.chartTimeSelect,
        accountType: this.accountType,
        superid:this.superid,
      }
      if(this.chartTimeSelect == 7){
        Object.assign(params, this.form)
      }
      if(this.youhuashiId != 0){
        params.optid = this.youhuashiId
      }
      this.getRiData()
      getAccountSummary(params).then((res) => {
        if(res.errcode == 0){
          this.totalList = res.data
        }
      });
    },
    getOptimizerList(){
      // 获取优化师列表
      getOptimizerList({}).then((res) => {
        console.log(res)
        if(res.errcode == 0){
          this.youhuashi = res.data
        }
      });
    },
    getLastUpdateTime(){
      getLastUpdateTime({}).then((res) => {
        if(res.errcode == 0){
          this.lastUpdateTime = res.data[0].lasttime
        }
      }).catch(() => {
        
      });
    },
    getRiData(){
      const _this = this;
      this.loading = true;
      let params = {
        column:this.changeKey,
        sortrule:this.changeOrder,
        type:this.chartTimeSelect,
        superid:this.superid,
        accountType: this.accountType
      }
      if(this.chartTimeSelect == 7){
        // let form = JSON.parse(JSON.stringify(this.form))
        // form.end_date += " 23:59:59"
        Object.assign(params, this.form)
      }
      if(this.youhuashiId != 0){
        params.optid = this.youhuashiId
      }
      getAccountReportByDate(params).then((res) => {
        _this.loading = false;
        if(res.errcode == 0){
          _this.dataSource = res.data
        }
      }).catch(()=>{
        _this.loading = false;
      });
    },
    sliderChange(value){
      this.chartIndex = this.marksList.find(o=>o.value == value).index
      this.chartRun()
    },
    getSorter(sorter){
      if(sorter.column){
        this.changeKey = sorter.column.dataIndex
        switch(sorter.order){
          case "ascend":
            this.changeOrder = 'ASC'
            break
          case "descend":
            this.changeOrder = 'DESC'
            break
        }
      }else{
        this.changeKey = ''
        this.changeOrder = ''
      }
    },
    myColumns(filteredValue){
      // value 为传入的filteredValue，刚开始时为全部
      let topColumns = columns
      let _columns = []
      let filters = []
      for(let item of topColumns){
        if(item.dataIndex != 'filter'){
          filters.push({
            text: item.title,
            value: item.dataIndex
          })
        }
        if(filteredValue.includes(item.dataIndex)){
          _columns.push(item)
        }
      }
      if(!_columns.find(e=>e.dataIndex == 'filter')){
        _columns.unshift({
          title: '',
          width: 40,
          dataIndex: 'filter',
          filters,
          filteredValue,
          fixed: 'left'
        })
      }
      this.columns = _columns
      // for(let [idx, item] of Object.entries(_columns)){
      //   this.$set(this.columns, idx, item)
      // }
    },
    onClear() {
      this.$message.info('您清空了勾选的所有行')
    },
    onChange(pagination, filters, sorter,) {
      // console.log(pagination, filters, sorter, this.columns.length)
      this.pageSize = pagination.pageSize
      if(filters.filter){
        if(filters.filter.length + 1 != this.columns.length){
          return this.myColumns(filters.filter)
        }
      }

      let arr = ['profit']
      if(this.page == pagination.current && !arr.includes(sorter.columnKey)){
        this.getSorter(sorter)
        this.getRiData()
      }
      this.page = pagination.current
    },
    onExpand(bool, row){
      if(bool){
        this.expandedRowKeys.push(row.id)
      }else{
        let idx = this.expandedRowKeys.findIndex(e=>e == row.id)
        this.expandedRowKeys.splice(idx,1)
      }
      console.log("onExpand", bool, row,this.expandedRowKeys)
    },
    tabsChange(){
      this.init()
    },
    selectYouhuashi(e){
      this.youhuashiId = e
      this.init()
    },
    selectChange(){
      this.getTotalData()
    },
    formDateChange(e){
      if(e.length == 0){return}
      this.form.start_date = e[0].format("YYYY-MM-DD")
      this.form.end_date = e[1].format("YYYY-MM-DD")
      this.getTotalData()
    },
    disabledDate(current){
      return current && ( current < moment().endOf('day').add(-100, 'days') || current > moment().endOf('day').add('days')) ;
    },
    handle_export() {  // 导出
      this.outputLoading = true
      setTimeout(() => {
        this.pageSize = 999999999
        this.columns.shift() 
        this.columns[0].fixed = '' // fixed会导致导出数据重复
        this.dataSource.unshift({
          userName: '合计',
          impression: this.totalList.impression,
          click: this.totalList.click,
          ctr: this.totalList.ctr,
          cost: parseFloat((this.totalList.cost || 0)),
          dsOcpcConversionsDetail90: parseFloat((this.totalList.dsOcpcConversionsDetail90 || 0)),
          dsOcpcConversionsDetail90Cost: parseFloat((this.totalList.dsOcpcConversionsDetail90Cost || 0)),
          productGmv: parseFloat((this.totalList.productGmv || 0)),
          closedAmount: parseFloat((this.totalList.closedAmount || 0)),
          cvr90: this.totalList.cvr90,
          dsOcpcConversionsDetail80: parseFloat((this.totalList.dsOcpcConversionsDetail80 || 0)),
          dsOcpcConversionsDetail80Cost: parseFloat((this.totalList.dsOcpcConversionsDetail80Cost || 0)),
          dsOcpcConversionsDetail80Amount: parseFloat((this.totalList.dsOcpcConversionsDetail80Amount || 0)),
          cvr80: this.totalList.cvr80,
          profit: parseFloat((this.totalList.profit || 0)),
          productCost:parseFloat((this.totalList.productCost.toFixed(2) || 0)),
        })
      }, 300);
      setTimeout(() => {
        var xlsxParam = {
          raw: true
        }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
        let xlsxName = this.xlsxName('账户报表')
        let workbook = xlsx.utils.book_new();
        let ws1 = xlsx.utils.table_to_sheet(document.querySelector('#zhanghuTable'), xlsxParam);
        console.log(document.querySelector('#zhanghuTable'), ws1)
        xlsx.utils.book_append_sheet(workbook, ws1, xlsxName);
        // 列转换数字格式
        for (let key in ws1) {
          if(ws1[key]['t']){
            ws1[key]['t'] = "n"
          }
        }

        let wbout = xlsx.write(workbook, {
            bookType: 'xlsx',
            bookSST: false,
            type: 'array'
        });
        try {
          FileSaver.saveAs(
          new Blob([wbout], {
              type: 'application/octet-stream;charset=utf-8"'
          }), xlsxName + '.xlsx');
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout);
        }finally{
          this.dataSource.shift()
          this.pageSize = 10
          this.outputLoading = false
          this.columns[0].fixed = 'left'
          this.myColumns(columns.map(o=>o.dataIndex))
        }
        return wbout;
      }, 600);
    },
    xlsxName(name){
      let xlsxName = ''
      switch(this.chartTimeSelect){
        case '1':case 1:
          xlsxName = name + '-' + moment().format("YYYY年MM月DD日")
        break;
        case '2':case 2:
          xlsxName = name + '-' + moment().add(-1, 'day').format("YYYY年MM月DD日")
        break;
        case '3':case 3:
          xlsxName = name + '-' + moment().add(-7, 'days').format("YYYY年MM月DD日") + '至' + moment().add(-1, 'days').format("YYYY年MM月DD日")
        break;
        case '4':case 4:
          xlsxName = name + '-' + moment().add(-30, 'days').format("YYYY年MM月DD日") + '至' +  moment().add(-1, 'days').format("YYYY年MM月DD日")
        break;
        case '5':case 5:
          xlsxName = name + '-' + moment().startOf('month').format("YYYY年MM月DD日") + '至' +  moment().format("YYYY年MM月DD日")
        break;
        case '6':case 6:
          xlsxName = name + '-' + moment().startOf('quarter').format("YYYY年MM月DD日") + '至' +  moment().format("YYYY年MM月DD日")
        break;
        case '7':case 7:
          xlsxName = name + '-' + moment(this.form.start_date).format("YYYY年MM月DD日") + '至' + moment(this.form.end_date).format("YYYY年MM月DD日")
        break;
      }
      return xlsxName
    },
    watchWindowWidth(){
      let width = window.innerWidth
      if(width<=1600){
        this.labelAlign = "left"
      }else{
        this.labelAlign = "right"
      }
      window.onresize = () => {
        width = window.innerWidth
        if(width<=1200){
          this.labelAlign = "left"
        }else{
          this.labelAlign = "right"
        }
      }
    }
  },
  watch:{
  },
  computed:{
    isoptimizer(){
      return this.$store.state.user.userInfo.isoptimizer
    },
    
  },
  components:{
    StandardTable,
    countTo,
  }
}
</script>

<style lang="less" scoped>
.container{
  .card{
    margin-bottom: 20px;
  }
  .area{
    display: flex;
    align-items: center;
  }
  .fontGreen{
    margin-left: 10px;
    color: #41b883;
  }
  .fontRed{
    margin-left: 10px;
    color: #c96168;
  }
}
.search{
  background-color: #ffffff;
  padding: 12px;
  border-radius: 8px;
}

.card-container {
  overflow: hidden;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}

.totalContainer{
  background-color: #f0f2f5;
}
.total-col{
  background-color: #fff;
  border-radius: 8px;
  padding: 10px 20px;
  margin-top: 20px;
}
.total-item{
  display: flex;
  flex-direction: column;
  .title{
    // font-weight: 700;
    // font-size: 22px;
    // color: #545b66;
    color: rgba(0,0,0,.45);
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
  }
  .p{
    color: #222222;
    font-size: 22px;
    margin-top: 20px;
  }
}
</style>